import React ,{Component} from "react";
import { Space, Select} from "antd";
import axios from 'axios';
import data from '../../../compontens/data/M0018C_1_month.json'
import * as echarts from 'echarts';
import getData from "../../../compontens/GetData/getData";

export default class SankeyChart extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      options: [],
  }
}
  SankyItem = (data) => {
    var chartDom = document.getElementById('SankeyChart');
    this.myChart = echarts.init(chartDom);
    var option = {
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove'
        },
        backgroundColor: 'white', 
        series: [
          {
                type: 'sankey',
                emphasis: {
                  focus: 'adjacency'
                },
                nodeAlign: 'left',
                data: data.nodes,
                links: data.links,
                lineStyle: {
                  color: 'source',
                  curveness: 0.5
                }
              }
        ]
    }
    this.myChart.setOption(option);
  }
  get_data = (file_Name) => {
    getData(file_Name)
    .then(result => {
      this.SankyItem(result)
    })
    .catch(error => {
      alert('Error');
    });
  };

  chartReseize = () => {
    this.myChart && this.myChart.resize()
  }

  handleChange = (value) => {
    const file_Name = this.state.kra_result.sankey_path +'/' + value + '.sankey.json';
    this.get_data(file_Name);
  };
  componentDidMount(){
    const kra_result =  {
      "IDList": ["M0018C_2_month", "M0018C_1_month", "M0018C_3_month", "M0018C_14_day", "M0018C_birth", "M0018M_3_month", "M0018M_gest", "M0018M_birth"],
      "kra_path": "data/Result/1/Kraken_result",
      "result_path": "data/Result/1",
      "sankey_path": "data/Result/1/sankey",
      "krona_path": "data/Result/1/Krona_result",
      "classification_path": "data/Result/1/Kraken_result",
      "diversity_path": "data/Result/1/diversity"
    }
    if(!kra_result){
      return;
    }

    const options = kra_result.IDList.map((item) => {
      return {
        value: item,
        label: item,
      }
    })
    const defaultValue = kra_result.IDList[0];
    this.setState({
      kra_result: kra_result,
      options : options,
      defaultValue: defaultValue,
    })
    const file_Name = kra_result.sankey_path +'/' + kra_result.IDList[0] + '.sankey.json';
    this.get_data(file_Name);    
  }
  render(){
    const {options} = this.state;
    const defaultValue = localStorage.getItem('defaultValue')
    return(
      <>
        <Select 
                        style={{
                            width: "100%",
                            textAlign: "center",
                            display: "flex",
                            alignItems: "center",
                            justifyContent: "center"
                        }}
                        defaultValue={'M0018C_2_month'} options={options} onChange={this.handleChange}/> 
      <div className='w100 h100' id='SankeyChart'></div>
      </>
    )
  }
}